﻿<!DOCTYPE html>
<html>

<head id="Head1" runat="server">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>新机计划执行看板</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
  <link rel="Shortcut Icon" href="../images/tempoBI.ico" type="image/x-icon" />
  <link rel="stylesheet" href="../StaticFiles/layui/dist/css/layui.css" />
  <link rel="stylesheet" href="../styles/pace.css" />
  <script type="text/javascript" src="../Scripts/pace.min.js"></script>
  <script type="text/javascript" src="../Scripts/json2.js"></script>
  <script type="text/javascript" src="../Scripts/jquery-1.11.2.min.js"></script>
  <script type="text/javascript" src="../Scripts/crypto-js.min.js"></script>
  <style type="text/css">
    html {
      background-image: url(../images/bg.jpg);
      background-repeat: no-repeat;
    }

    #header {
      height: 60px;
      background-image: url(../images/抬头.png);
      background-size: 100% 60px;
      background-repeat: no-repeat;
      color: #fff;
      font-weight: bold;
      text-align: center;
      font-size: 28px;
      line-height: 60px;
    }

    #title {
      color: #fff;
      font-family: '微软雅黑';
      font-size: 20px;
      font-weight: bold;
      height: 32px;
      line-height: 32px;
    }

    li {
      float: right;
      width: 100px;
      color: #fff;
      font-family: '微软雅黑';
      font-size: 14px;
      font-weight: bold;
      border: 1px solid #fff;
      margin-left: 10px;
      text-align: center;
      height: 30px;
      line-height: 30px;
    }

    /*未排产*/
    .notplan {
      background-color: #0099CC;
      border-color: #0099CC;
      border-radius: 3px;
      cursor: pointer;
    }

    /*已完工*/
    .finished {
      background: #00ff00;
      color: #000;
      border-color: #00ff00;
      border-radius: 3px;
      cursor: pointer;
    }

    /*集件预警*/
    .warning {
      background: #ffff00;
      color: #333;
      border-color: #ffff00;
      border-radius: 3px;
      cursor: pointer;
    }

    /*超期未完*/
    .danger {
      background: #ff0000;
      color: #fff;
      border-color: #ff0000;
      border-radius: 3px;
      cursor: pointer;
    }

    /*已排产有问题*/
    .notes {
      background: rgb(245, 108, 108);
      color: #fff;
      border-color: rgb(245, 108, 108);
      border-radius: 3px;
      cursor: pointer;
    }

    /*已排产无问题*/
    .noNotes {
      color: #fff;
      border: 1px solid #fff;
      border-radius: 3px;
      cursor: pointer;
    }

    .layui-table-view th {
      font-weight: bold;
      font-size: 16px;
      text-align: center;
      color: #009688;
    }

    .layui-table-cell {
      text-align: center;
      color: #fff;
      font-size: 12px;
      padding: 0px;
    }

    .layui-table {
      background-color: transparent !important;
    }

    .layui-table-header {
      background-color: transparent !important;
    }

    .layui-table-header,
    .layui-table-cell {
      /*color: rgb(60,176,255);*/
      color: #fff;
      font-size: 12px;
      font-weight: bold;
    }

    .layui-table tr,
    .layui-table tr:hover,
    .layui-table[lay-even] tr:nth-child(even) {
      background-color: transparent !important;
    }

    .layui-laypage a,
    .layui-laypage span {
      color: #fff;
    }

    .layui-laypage .layui-laypage-skin {
      color: #fff;
    }

    .layui-table,
    .layui-table-view {
      margin: 5px 0;
    }

    #grid {
      margin: 0px;
      padding: 0px;
    }
  </style>
</head>

<body>
  <div class="layui-row" style="padding: 0 15px; margin-bottom: 10px;">
    <div class="layui-col-md12">
      <div id="header">
        新机计划执行情况
      </div>
    </div>
  </div>
  <div class="layui-row" style="padding: 0 15px;">
    <div class="layui-col-md6">
      <h2 id="title">
      </h2>
    </div>
    <div class="layui-col-md6">
      <ul>
        <li class="notplan" style="cursor:auto;">未排产</li>
        <li class="finished" style="cursor:auto;">已完工</li>
        <li class="warning" style="cursor:auto;">集件预警</li>
        <li class="danger" style="cursor:auto;">超期未完</li>
        <li class="notes" style="cursor:auto;">已排产有问题</li>
        <li class="noNotes" style="cursor:auto;">已排产无问题</li>
      </ul>
    </div>
  </div>
  <form class="layui-form" action="">
    <div class="layui-fluid">
      <div class="layui-row layui-col-space5">
        <div class="layui-col-md12">
          <table class="layui-table" id="grid" layui-data="{}" lay-filter="grid">
          </table>
        </div>
      </div>
    </div>
    <iframe id="iframe" src="" style="display:none;"></iframe>
  </form>
  <script type="text/javascript" src="../StaticFiles/layui/dist/layui.js"></script>
  <script type="text/javascript">
    $(function () {
      layui.use(['layer', 'table', 'form'], function () {
        var table = layui.table;
        var layer = layui.layer;
        var $ = layui.$;
        var form = layui.form;
        var grid = null;
        var index = null;

        //解密方法
        function Decrypt(source) {
          var key = CryptoJS.enc.Utf8.parse("12345678900000001234567890000000"); //32位
          var iv = CryptoJS.enc.Utf8.parse("1234567890000000"); //16位
          var encryptedHexStr = CryptoJS.enc.Hex.parse(source);
          var srcs = CryptoJS.enc.Base64.stringify(encryptedHexStr);
          var decrypt = CryptoJS.AES.decrypt(srcs, key, {
            iv: iv,
            mode: CryptoJS.mode.CBC,
            padding: CryptoJS.pad.Pkcs7
          });
          var decryptedStr = decrypt.toString(CryptoJS.enc.Utf8);
          return decryptedStr.toString();
        }

        var productfamilyname = Decrypt(layui.url().search.productfamilyname);
        var month = new Date().getMonth() + 1;

        $('#title').text('D交付 | 新机' + month + '月' + productfamilyname + '计划执行情况');

        function showTip(data) {
          if (data === '' || data === 'undefined') {
            return;
          } else {
            index = layer.tips(data, '#showTip', { tips: [1, '#1E9FFF'], time: 60000 });
          }
        };

        function BindCell(field) {
          if (field.split(';')[1] === '已完工') {
            return '<span class="finished data-cell" data="' + field.split(';')[2] + '" style="padding:5px 10px;">' + field.split(';')[0] + '</span>';
          } else if (field.split(';')[1] === '集件预警') {
            return '<span class="warning data-cell" data="' + field.split(';')[2] + '" style="padding:5px 25px;">' + field.split(';')[0] + '</span>';
          } else if (field.split(';')[1] === '超期未完') {
            return '<span class="danger data-cell" data="' + field.split(';')[2] + '" style="padding:5px 25px;">' + field.split(';')[0] + '</span>';
          } else if (field.split(';')[1] === '已排产有问题') {
            return '<span class="notes data-cell" data="' + field.split(';')[2] + '" style="padding:5px 25px;">' + field.split(';')[0] + '</span>';
          } else if (field.split(';')[1] === '已排产无问题') {
            return '<span class="noNotes data-cell" data="' + field.split(';')[2] + '" style="padding:5px 25px;">' + field.split(';')[0] + '</span>';
          } else if (field.split(';')[1] === '未排产') {
            return '<span class="notplan data-cell" data="' + field.split(';')[2] + '" style="padding:5px 25px;">' + field.split(';')[0] + '</span>';
          }
        }

        grid = table.render({
          elem: '#grid'
          , url: '../handler/board/ZSPichanPlanLookBoard.ashx?type=GetXinjiData'
          , method: 'POST'
          , page: false
          , where: {
            productfamilyname: productfamilyname
          }
          , cols: [[
            { type: 'numbers', title: '序号', width: 50 }
            , { field: 'ATTRIBUTEVALUE', title: '发动机号', width: 130 }
            , {
              field: 'yicijijian', title: '0010-集件',
              templet: function (d) {
                return BindCell(d.yicijijian);
              }
            }
            , {
              field: 'yicibuzhuang', title: '0020-部装',
              templet: function (d) {
                return BindCell(d.yicibuzhuang);
              }
            }
            , {
              field: 'yicichuanzhuang', title: '0030-传装',
              templet: function (d) {
                return BindCell(d.yicichuanzhuang);
              }
            }
            , {
              field: 'yicizhongzhuagn', title: '0040-总装',
              templet: function (d) {
                return BindCell(d.yicizongzhuang);
              }
            }
            , {
              field: 'gongchangshiche', title: '0050-工厂试车',
              templet: function (d) {
                return BindCell(d.gongchangshiche);
              }
            }
            , {
              field: 'fenjie', title: '0060-分解',
              templet: function (d) {
                return BindCell(d.fenjie);
              }
            }
            , {
              field: 'gujian', title: '0070-故检',
              templet: function (d) {
                return BindCell(d.gujian);
              }
            }
            , {
              field: 'ercijijian', title: '0080-集件',
              templet: function (d) {
                return BindCell(d.ercijijian);
              }
            }
            , {
              field: 'ercibuzhuang', title: '0090-部装',
              templet: function (d) {
                return BindCell(d.ercibuzhuang);
              }
            }
            , {
              field: 'ercichuanzhuang', title: '0100-传装',
              templet: function (d) {
                return BindCell(d.ercichuanzhuang);
              }
            }
            , {
              field: 'ercizongzhuagn', title: '0110-总装',
              templet: function (d) {
                return BindCell(d.ercizongzhuang);
              }
            }
            , {
              field: 'jianyanshiche', title: '0120-检验试车',
              templet: function (d) {
                return BindCell(d.jianyanshiche);
              }
            }
          ]]
          , done: function (res, curr, count) {
            $('.data-cell').each(function () {
              var that = $(this);
              that.bind('mouseenter', function () {
                that.attr('id', 'showTip');
                showTip(that.attr('data'));
              });

              that.bind('mouseleave', function () {
                layer.close(index);
                that.attr('id', '');
              });
            });


          }
        });
      });
    });
  </script>
</body>

</html>